<template>
  <div class="managerMana-container common-container">
    <div class="common-top">
      <span class="left title">算力价格列表</span>
      <el-button type="primary" size="small" @click="doModify('add')" v-if="hasPerm('system:vipPrice:edit')">
        添加算力价格
      </el-button>
    </div>
    <div class="common-bot" v-if="hasPerm('system:vipPrice:list')">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID"/>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="detail" label="描述"></el-table-column>
        <el-table-column prop="day" label="会员天数"></el-table-column>
        <el-table-column prop="maxBuy" label="最大购买次数"></el-table-column>
        <el-table-column prop="price" label="价格">
          <template slot-scope="scope">{{scope.row.price | fen2yuan}}</template>
        </el-table-column>
        <el-table-column prop="createTime" label="到期时间">
          <template slot-scope="scope">
            <span>{{ scope.row.expiredTime | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="queue" label="排序值"></el-table-column>
        <el-table-column prop="enable" label="是否启用">
          <template slot-scope="scope">
            {{scope.row.enable?"是":"否"}}
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作" width="100"
          v-if="hasPerm('system:vipPrice:edit', 'system:vipPrice:del')"
        >
          <template slot-scope="scope">
            <el-link class="left3px" type="primary" @click.stop="doModify('edit', scope.row)"
                     v-if="hasPerm('system:vipPrice:edit')">
              编辑
            </el-link>
            <el-link class="left3px" type="danger" @click.stop="doModify('del', scope.row)"
                     v-if="hasPerm('system:vipPrice:del')">
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-if="showPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="nowPage"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="totalElement"
        ></el-pagination>
      </div>
    </div>
    <Modify
      ref="modify"
      @close="close"/>
  </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import Api from "@/api/index";
  import Briefly from "@/layout/components/Briefly";
  import Modify from "./modify.vue";

  export default {
    components: {Briefly, Modify},
    computed: {
      ...mapGetters(["name"]),
    },
    data() {
      return {
        showPage: false,
        tableData: [],
        enable: 0,
        keyword: "",
        limit: 10,
        nowPage: 1,
        totalElement: 0,
      };
    },
    watch: {
      nowPage(val) {
        this.getData();
        this.setStateData(val);
      },
      limit(val) {
        this.getData();
      },
    },
    methods: {
      close() {
        this.getData();
      },
      //
      setStateData(nowPage) {
        let stateData = {
          nowPage,
        };
        this.$router.replace({
          path: this.$route.path,
          query: {
            stateData: this.$base64.encode(JSON.stringify(stateData)),
          },
        });
      },
      handleSizeChange(val) {
        this.limit = val;
      },
      handleCurrentChange(val) {
        this.nowPage = val;
      },
      doModify(type, item = null) {
        switch (type) {
          case "add":
            this.$refs.modify.show();
            break;
          case "edit":
            this.$refs.modify.show(item.id)
            break;
          case "del":
            this.$confirm("确认此操作?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
              Api.vipPrice.del({targetIds: [item.id]}).then((res) => {
                if (res.code == 200) {
                  this.$message.success("操作成功");
                  this.getData();
                }
              });
            })
              .catch((e) => this.getData());
            break;
        }
      },
      toModify(type) {
        this.$router.push({name: "managerModify", query: {type}});
      },
      getData() {
        Api.vipPrice
          .list({
            limit: this.limit,
            page: this.nowPage - 1
          })
          .then((res) => {
            this.tableData = res.data;
            this.totalElement = res.total;
            this.showPage = true;
          });
      },
    },
    mounted() {
      if (this.$route.query.stateData) {
        console.log(JSON.parse(this.$base64.decode(this.$route.query.stateData)));
        const stateData = JSON.parse(
          this.$base64.decode(this.$route.query.stateData)
        );
        this.nowPage = stateData.nowPage;
        this.getData();
      } else {
        this.getData();
      }
    },
  };
</script>

<style lang="scss" scoped>
  .left3px {
    margin-left: 3px;
  }
</style>
